<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div id="myDiv"></div>
        <div class="sel"></div>
        <div class="sel"></div>
        <div class="sel"></div>

        <img src="" alt="" class="btn">
    </div>
    <script>

        /**
         * Selectors API中的querySelector('css选择符')
         * 
         * 用document调用querySelector方法会在文档元素开始搜索,
         * element调用querySelector从元素节点的后代中查找
        */

        // 取得body元素
        const body = document.querySelector("body")
        console.log(body)

        // 取得id为myDiv的元素
        const myDiv = document.querySelector("#myDiv")
        console.log(myDiv)

        // 取得类名为sel的第一个元素
        const sel = document.querySelector('.sel')
        console.log(sel)

        // 取得类名为btn的图片
        const img = document.querySelector('img.btn')
        console.log(img)
    </script>
</body>
</html>